<!-- 3D中国地图可视化组件 -->
<template>
  <!-- 图表容器 -->
  <div ref="chartDom" class="chart"></div>
  <!-- 返回顶层按钮 -->
  <div @click="toTop" class="toTop">顶层</div>
</template>

<script setup>
// 导入必要的 Vue 组件和 ECharts 相关依赖
import { ref, watch, defineProps, nextTick, onUnmounted, reactive } from "vue";
import * as echarts from "echarts";
import { getMap } from "@/api/map.js";
import "echarts-gl"; // 导入 ECharts GL 支持 3D 效果

// 初始化图表实例和 DOM 引用
let myChart = null;
const chartDom = ref(null);

// 配置 ECharts 选项
const option = reactive({
  series: [
    {
      type: "map3D", // 使用 3D 地图类型
      map: "china", // 地图类型为中国地图
      name: "china",
      zlevel: -10, // 图层层级
      top: 0,
      boxWidth: 150, // 地图宽度
      boxHeight: 80, // 地图高度
      boxDepth: 160, // 地图深度，影响倾斜度
      regionHeight: 4, // 地图区域高度（厚度）
      
      // 标签配置
      label: {
        show: false, // 默认不显示地区名称
      },
      
      // 地图样式配置
      itemStyle: {
        areaColor: "#6554C0", // 地图区域颜色
        opacity: 1, // 透明度
        borderWidth: 0.5, // 边框宽度
        borderColor: "#A299DA", // 边框颜色
      },
      
      // 鼠标悬停效果配置
      emphasis: {
        label: {
          show: true, // 悬停时显示标签
          distance: 0,
          textStyle: {
            color: "yellow", // 悬停时文字颜色
            fontSize: 14,
            fontFamily: "微软雅黑",
          },
          formatter: (e) => {
            return `${e.name} `;
          },
        },
        itemStyle: {
          areaColor: "#61A4E4", // 悬停时区域颜色
          borderColor: "#88BAEA",
          borderWidth: 2,
        },
      },
      
      // 光照效果配置
      light: {
        main: {
          intensity: 1, // 光照强度
          shadow: true, // 启用阴影
          shadowQuality: "ultra", // 阴影质量
        },
      },
      
      // 地面配置
      groundplane: {
        show: false, // 不显示地面
      },
      
      // 示例数据
      data: [
        {
          name: "青海省",
          value: 100,
          label: {
            formatter: (evt) => {
              return "1111";
            },
          },
        },
      ],

      // 材质效果配置
      shading: "realistic", // 使用真实感渲染
      realisticMaterial: {
        detailTexture: "/layout/bj.png", // 纹理贴图
        textureTiling: 1, // 纹理平铺次数
        roughness: 0, // 材质粗糙度
        metalness: 0, // 金属度
        roughnessAdjust: 0,
      },
      
      // 视角控制配置
      viewControl: {
        zoomSensitivity: 1, // 缩放灵敏度
        projection: "perspective", // 投影方式
        autoRotate: false, // 禁用自动旋转
        damping: 0, // 阻尼系数
        rotateSensitivity: 2, // 旋转灵敏度
        rotateMouseButton: "left", // 旋转使用的鼠标按键
        zoomSensitivity: 2, // 缩放灵敏度
        panSensitivity: 2, // 平移灵敏度
        panMouseButton: "right", // 平移使用的鼠标按键
        distance: 200, // 视角距离
        minDistance: 100, // 最小距离
        maxDistance: 300, // 最大距离
        minAlpha: 30, // 最小水平旋转角度
        maxAlpha: 80, // 最大水平旋转角度
        minBeta: -25, // 最小垂直旋转角度
        maxBeta: 45, // 最大垂直旋转角度
        center: [0, 0, 0], // 视角中心点
        animation: true, // 启用动画
        animationDurationUpdate: 1000, // 动画持续时间
        animationEasingUpdate: "cubicInOut", // 动画缓动效果
      },
    },
  ],
});

// 组件挂载后初始化图表
nextTick(() => {
  myChart = echarts.init(chartDom.value);
  // 获取中国地图数据并注册
  getMap("100000").then((e) => {
    echarts.registerMap("china", e);
    setChart();
  });

  // 监听窗口大小变化，自动调整图表大小
  window.addEventListener("resize", () => {
    myChart.resize();
  });
});

// 返回顶层地图
function toTop(){
  myChart.clear()
  getMap('100000').then((e) => {
    echarts.registerMap("china", e);
    setChart();
  });
}

// 组件卸载时清理图表实例
onUnmounted(() => {
  myChart.clear();
});

// 设置图表配置和事件
function setChart() {
  myChart.clear()
  myChart.setOption(option);
  // 点击地图区域事件处理
  myChart.on('click', function(params) {
    // 根据点击的地区名称查找对应的行政区划代码
    let arcode = null
    for(let i=0;i<chinaRegionCodes.length;i++){
      if(chinaRegionCodes[i].name===params.name){
        arcode = chinaRegionCodes[i].code
        break;
      }
    }
    // 获取并显示下级地图
    getMap(arcode).then((e) => {
      console.log(e, 9);
      echarts.registerMap("china", e);
      setChart();
    });
  });
}

// 中国行政区划代码数据
const chinaRegionCodes = [
  // 直辖市
  { code: '110000', name: '北京市' },
  { code: '120000', name: '天津市' },
  { code: '310000', name: '上海市' },
  { code: '500000', name: '重庆市' },
  
  // 省份
  { code: '130000', name: '河北省' },
  { code: '140000', name: '山西省' },
  { code: '150000', name: '内蒙古自治区' },
  { code: '210000', name: '辽宁省' },
  { code: '220000', name: '吉林省' },
  { code: '230000', name: '黑龙江省' },
  { code: '320000', name: '江苏省' },
  { code: '330000', name: '浙江省' },
  { code: '340000', name: '安徽省' },
  { code: '350000', name: '福建省' },
  { code: '360000', name: '江西省' },
  { code: '370000', name: '山东省' },
  { code: '410000', name: '河南省' },
  { code: '420000', name: '湖北省' },
  { code: '430000', name: '湖南省' },
  { code: '440000', name: '广东省' },
  { code: '450000', name: '广西壮族自治区' },
  { code: '460000', name: '海南省' },
  { code: '510000', name: '四川省' },
  { code: '520000', name: '贵州省' },
  { code: '530000', name: '云南省' },
  { code: '540000', name: '西藏自治区' },
  { code: '610000', name: '陕西省' },
  { code: '620000', name: '甘肃省' },
  { code: '630000', name: '青海省' },
  { code: '640000', name: '宁夏回族自治区' },
  { code: '650000', name: '新疆维吾尔自治区' },
  
  // 特别行政区
  { code: '810000', name: '香港特别行政区' },
  { code: '820000', name: '澳门特别行政区' },
  
  // 台湾省(注：行政区划代码实际使用可能有所不同)
  { code: '710000', name: '台湾省' }
];
</script>

<style scoped>
/* 图表容器样式 */
.chart {
  width: 100%;
  flex: 1;
}
/* 返回顶层按钮样式 */
.toTop{
  position: absolute;
  top: 80px;
  left: 50%;
  color: #fff;
  cursor: pointer;
}
</style>
